<template>
  <div :style="{ backgroundColor: sectionData.options.backgroundColor }">
    <MagnetGroup v-if="isGroup" :sectionData="sendGroupData" :contentWidth="contentWidth" />
    <MagnetItem
      v-else
      :mType="magnetType"
      :magnetStyle="magnetStyleData"
      :magnet="sendMagnetData"
      :magnetShortStyle="magnetShortStyle"
      :contentWidth="contentWidth"
    />
  </div>
</template>

<script>
  import MagnetItem from './components/magnet-item.vue';
  import MagnetGroup from './components/magnet-group.vue';
  export default {
    name: 'Magnet',
    components: {
      MagnetItem,
      MagnetGroup,
    },
    props: {
      sectionData: {
        type: Object,
      },
      contentWidth: {
        type: Number,
      },
    },
    data() {
      return {
        //便于对数据进行预处理
        sectionDataCopy: this.sectionData,
      };
    },
    computed: {
      isGroup() {
        if (
          this.sectionData.data.propertyMap.data[0] &&
          this.sectionData.data.propertyMap.data[0].groupType == 1
        ) {
          return true;
        }
        return false;
      },
      groupType() {
        return this.sectionData.data.propertyMap.groupStyle || '0';
      },
      magnetType() {
        return this.sectionData.data.propertyMap.iconType || '0';
      },
      magnetShortStyle() {
        return this.sectionData.data.propertyMap.shortcutStyle || 'icon';
      },
      groupStyleData() {
        //单独设置的只有分组名称，其他两个设置都是一样的
        let groupLabelColor = this.sectionData.data.propertyMap.groupLabelColor;
        let groupLableFontColor = this.sectionData.data.propertyMap.groupLableFontColor;
        return {
          groupLabelColor,
          groupLableFontColor,
        };
      },
      magnetStyleData() {
        let allData = this.sectionData.data.propertyMap;
        // 磁贴底色
        let arr = allData.iconBackGroundColor.split(';');
        arr.pop();
        let magnetBgc = arr;
        // 图标颜色
        let iconColor = allData.iconColor;
        // 文字颜色
        let fontColor = allData.fontColor;
        // 图标背景颜色
        let iconBackGroundColor = allData.iconBackGroundColor;
        // 磁贴边框,这里是5px
        let borderRadius = allData.borderRadius;
        // 图标尺寸
        let iconSize = allData.iconSize;
        // 对齐方式
        let alignStyle = allData.alignStyle;
        // 平铺列数
        let maxColNum = allData.maxColNum;
        // 大卡片轮播id
        let entityId = this.sectionData.options.entityId;
        // 大卡片大磁贴数
        let bigNum = Number(allData.mNum);
        // 大卡片小磁贴数
        let smallNum = Number(allData.nNum);
        // 大卡片是否是默认布局
        let isDefault = allData.magneticLayout == 'default' ? true : false;
        // 大卡片2用户设置磁贴个数
        let pageNum = allData.pageNum;
        let textAlign = allData.textAlign;
        return {
          propertyMap: allData,
          textAlign,
          iconColor,
          magnetBgc,
          fontColor,
          borderRadius,
          iconSize,
          alignStyle,
          iconBackGroundColor,
          entityId,
          bigNum,
          smallNum,
          pageNum,
          isDefault,
          maxColNum,
        };
      },
      sendGroupData() {
        return {
          options: {
            type: this.groupType,
            mType: this.magnetType,
            groupStyle: this.groupStyleData,
            magnetStyle: this.magnetStyleData,
          },
          data: this.sectionData.data,
        };
      },
      sendMagnetData() {
        let i = 0;
        let magnet = this.sectionData.data.propertyMap.data;
        magnet.forEach((item) => {
          item.portlets.forEach((item1) => {
            item1.bgColor =
              item1.bgColor == null ? this.magnetStyleData.magnetBgc[i] : item1.bgColor;
            item1.fontColor =
              item1.fontColor == null ? this.magnetStyleData.fontColor : item1.fontColor;
            item1.iconColor =
              item1.iconColor == null ? this.magnetStyleData.iconColor : item1.iconColor;
            if (this.magnetStyleData.magnetBgc.length != 1) {
              i++;
            }
          });
        });
        return magnet[0] ? magnet[0].portlets : [];
      },
    },
    created() {
      // console.log('@@@@', this);
      // console.log(this.sectionData.data.propertyMap.shortcutStyle, 'index-----------')
    },
  };
</script>

<style></style>
